<template>
  <div class="mainsBOx">
    <header>
      <div class="optionss">
        <span>Car Park:</span>
        <a-dropdown>
          <a-menu
            slot="overlay"
            @click="handleMenuClick"
            style="height: 200px; overflow-y: scroll"
          >
            <a-menu-item
              :key="item.id"
              v-for="item in carparkList"
              class="options-list"
            >
              <a-icon type="setting" />{{ item.carParkCode }}
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            please select Car Park <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <div class="optionss">
        <span> Room No: </span>
        <a-input-search
          placeholder="170-2-2"
          enter-button
          @search="onSearch"
          style="width: 600px"
        />
      </div>
      <!-- <a-button type="primary" @click="excleHandle"> Export Excel </a-button> -->
      <download-excel
        class="export-excel-wrapper"
        :data="searchData"
        :fields="json_fields"
        header="这是个excel的头部"
        name="carparkInformation.xls"
      >
        <a-button type="primary">Export Excel</a-button>
      </download-excel>
    </header>

    <article>
      <a-table :columns="columns" :data-source="searchData" rowKey="id">
      </a-table>
    </article>
  </div>
</template>
<script>
const columns = [
  {
    title: "carpark",
    // 响应回来的数据字段
    dataIndex: "carPark.carParkCode",
    key: "carParkCode",
    ellipsis: true,
  },
  {
    title: "Room No",
    dataIndex: "blklevelunit",
    key: "blklevelunit",
    ellipsis: true,
  },
  {
    title: "Entry Time",
    dataIndex: "visitDate",
    key: "visitDate",
    ellipsis: true,
  },
  {
    title: "Visitors",
    dataIndex: "passengersNumber",
    key: "passengersNumber",
    ellipsis: true,
  },
  {
    title: "Phone Num",
    dataIndex: "unit",
    key: "Phone",
    ellipsis: true,
  },
];

export default {
  //import引入的组件
  components: {},
  data() {
    return {
      keyword: "",
      carparkList: [],
      searchData: [],
      columns,
      // 导出的表格表头数据,使用的是  vue-json-excel  这个npm 包
      json_fields: {
        carpark: "carPark.carParkCode",
        RoomNo: "blklevelunit",
        EntryTime: "visitDate",
        Visitors: "passengersNumber",
        PhoneNum: "unit", //如果命名的标题有空格,需要用双引号
      },
    };
  },
  //方法集合
  methods: {
    // 搜素carpark的名字获取到的参数
    handleMenuClick(e) {
      this.rq
        .post(`/carpark/api/condo/queryVisitor?page=0&pageSize=20&size=20`, {
          blk: "",
          carparkId: e.key,
          level: "",
          unit: "",
        })
        .then((res) => {
          this.searchData = res.data.content;
          this.searchData.forEach((a) => {
            a["blklevelunit"] = a["blk"] + "-" + a["level"] + "-" + a["unit"];
          });
          console.log(this.searchData, "表格数据");
        });
    },

    // 搜索房间获取到的参数
    onSearch(e) {
      // blk-level-unit
      console.log(e);
      let arr = e.split("-");
      // console.log(arr, "转化");
      this.rq
        .post(`/carpark/api/condo/queryVisitor?page=0&pageSize=20&size=20`, {
          blk: arr[0],
          carparkId: 2,
          level: arr[1],
          unit: arr[2],
        })
        .then((res) => {
          this.searchData = res.data.content;
          this.searchData.forEach((a) => {
            a["blklevelunit"] = a["blk"] + "-" + a["level"] + "-" + a["unit"];
          });
          // console.log(this.searchData, "原始数据");
        });
    },
    // 倒处excle表格
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //   获取carpark的所有下拉list
    this.rq
      .get(
        `/carpark/api/car-parks/simple-car-park-list?keyword=${this.keyword}`,
        {}
      )
      .then((res) => {
        this.carparkList = res.data;
      });
  },
};
</script>
<style  lang="less" scoped >
.mainsBOx {
  header {
    display: flex;
    justify-content: space-evenly;
    .optionss {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>